/* 重置部分浏览器默认的样式 */

a{
    text-decoration: none;
}
body a:hover{
    text-decoration: none;
    color: red;
}
main{
    background-color: #c8eeeb;
    padding: 10px 0;
}
/* 设置 section 元素的样式 */
section {
    padding: 0 20px;
    background-color: #ffffff; /* 背景颜色 */
    margin: 0px 80px;
    border: 1px solid #23527c;
}
h4{
    color: #00CED1;
    border-bottom: 1px solid #c8eeeb;
    /*margin-left: 20px;*/
}
/* 设置小说列表的样式 */
.novel-list {
    display: flex;
    flex-wrap: wrap; /* 允许列表换行 */
    justify-content: space-between; /* 项目之间的间隔均匀分布 */
    align-items: center;
    /*margin-left: 20px;*/
}

/* 设置单个小说项的样式 */
.novel-item {
    width: calc(33% - -3px); /* 每行两个，每个占据50%的宽度减去间隔 */
    background-color: #ffffff; /* 背景颜色 */
    /*border: 1px solid #e0e0e0; !* 边框 *!*/
    /*box-shadow: 2px 2px 5px rgba(0,0,0,0.1); !* 阴影效果 *!*/
    display: flex; /* 使用flex布局 */
    align-items: flex-start; /* 垂直对齐方式 */
    border-bottom: 1px solid #ddd;
    margin-bottom: 5px;
}

/* 设置小说封面的样式 */
.novel-cover {
    width: 100px; /* 封面图片的宽度 */
    height: 150px; /* 封面图片的高度 */
    object-fit: cover; /* 保持图片比例，填充整个容器 */
    margin: 0 auto;
    padding: 2px;
    border: 1px solid #ddd;
}

/* 设置小说内容的样式 */
.novel-content {
    padding: 10px; /* 内边距 */
    width: 100%;
}

/* 设置小说标题的样式 */
.novel-title {
    font-size: 18px; /* 字体大小 */
    /*font-weight: bold; !* 字体加粗 *!*/
    margin: 0 0 10px 0; /* 外边距 */
    color: #168C84;
}

/* 设置小说作者、状态、更新时间等信息的样式 */
.novel-author, .novel-status, .novel-update-time {
    font-size: 14px; /* 字体大小 */
    color: #555; /* 字体颜色 */
    margin: 5px 0; /* 外边距 */
}

/* 设置小说简介的样式 */
.novel-latest-chapter {
    font-size: 14px; /* 字体大小 */
    color: #333; /* 字体颜色 */
    margin-top: 10px; /* 外边距 */
    overflow: hidden;
}

/* 删除按钮的样式 */
.delete-button {
    display: none; /* 改为 block，以便进行位置调整 */
    position: relative;
    /*right: -100%; !* 初始位置在容器右侧外部 *!*/
    /*top: 50%;*/
    /*transform: translateY(-50%);*/
    height: 25.5%;
    background-color: #bd362f;
    color: white;
    border: none;
    padding: 9px;
    cursor: pointer;
    writing-mode: vertical-rl;
    text-align: center;
    transition: right 1s ease-in-out, opacity 0.5s ease-in-out; /* 调整动画持续时间和添加 opacity 动画 */
    opacity: 1; /* 初始透明度为 0 */
    margin-left: auto;
}

/* 当鼠标悬停在小说项上时显示删除按钮 */
.novel-item:hover .delete-button {
    display: block;
    right: 10px; /* 滑入到容器内部，留出一些边距 */
    opacity: 1; /* 完全可见 */
}


body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.novel-detail {
    width: 80%;
    margin: 0px auto;
    background: #fff;
    padding: 10px 20px 20px 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.breadcrumb-1{
    position: relative;
    top: -2px;
    left: -15px;
    padding: 8px 15px;
    list-style: none;
    background-color: #f5f5f53d;
    border-radius: 4px;
    font-size: 15px;
}
.breadcrumb-1 a {
    color: #333;
    text-decoration: none;
}
.breadcrumb-1 a:hover{
    color: gray;
}
.novel-1{
    display: flex;
    justify-content: flex-start;
    margin: 0 auto;
    padding: 10px;
    border-bottom: 1px dashed #ddd;
    border-top: 1px solid #c8eeeb;
}
.novel-img{
    padding: 2px;
    margin-right: 10px;
    width: 120px;
    height: 170px;
}
.novel-info h1 {
    color: #d9534f;
    font-size: 24px;
}

.novel-info span {
    color: #666;
    margin-right: 10px;
}
.novel-info a{
    color: #ffffff;
}
.btn {
    display: inline-block;
    padding: 5px 15px;
    background-color: #d9534f;
    text-decoration: none;
    border-radius: 5px;
    margin-right: 10px;
    color: #fff;
}

.novel-status p {
    display: inline-block;
    margin-right: 20px;
}

.novel-intro p {
    color: #333;
    line-height: 1.6;
    font-size: 16px;
    margin: 10px;
}

.chapter-list{
    margin: 20px auto;
    overflow: hidden;
}
.chapter-list h3 {
    color: #168c84;
    border-bottom: 2px solid #d9534f;
    padding-bottom: 5px;
}

.chapter-list-1 {
    list-style-type: none; /* 移除列表项前的标记 */
    padding: 0; /* 移除内边距 */
    display: grid; /* 使用网格布局 */
    grid-template-columns: repeat(3, 1fr); /* 创建四列，每列等宽 */
    gap: 10px; /* 网格项之间的间距 */
    overflow: hidden;

}

.chapter-list-1 li {
    color: #333;
    overflow: hidden;
    border-bottom: 1px dotted #e5e5e5;
    padding: 10px; /* 为每个列表项添加内边距 */
}
.chapter-list-1 li:hover{
    color: gray;
}
/*小说内容*/
.read-container {
    width: 80%;
    margin: 0px auto;
    background-color: #f5f5f5;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.read-title {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
}
.read-nav {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.read-nav button {
    background-color: #00bfa5;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
}
.read-content {
    text-align: left;
    line-height: 2;
    font-size: 20px;
    color: #666;
    text-indent: 2px;
}
.read-page-info {
    color: #888;
    margin-bottom: 10px;
}


.footer{
    padding: 20px 0;
    background: #07B1A6;
    color: #fbfbfb;
    text-align: center;

}
.text-muted{
    color: #ffffff;
}


/* 设置下拉菜单的基本样式 */
.dropdown-1-menu {
    display: none;
    position: absolute;
    top: 101%;
    left: -184%;
    min-width: 134px;
    z-index: 1;
    text-align: center;
}

/* 设置下拉菜单项的样式 */
.dropdown-1-menu li {
    color: #777; /* 字体颜色 */
    background-color: #f8f8f8; /* 背景颜色 */
    padding: 12px 16px; /* 内边距 */
    text-decoration: none; /* 去除下划线 */
    display: block; /* 以块级元素显示 */
}
.dropdown-1-menu a{
    color: #777;
}
.dropdown-1-menu a:hover{
    color: #333;
}
.dropdown-1-menu li:hover {
    background-color: #e7e7e7; /* 鼠标悬停时的背景颜色 */
}
/* 当鼠标悬停在父元素上时显示下拉菜单 */
.dropdown-1:hover .dropdown-1-menu {
    display: block; /* 显示下拉菜单 */
}

/* 设置图标样式 */
.fa-bars {
    cursor: pointer; /* 鼠标悬停时显示手型指针 */
}

.active-1{
    color:#555;
}
.active-1 a:hover{
    color: #333;
}

/* 用户信息容器样式 */
.user-info {
    max-width: 600px; /* 最大宽度 */
    margin: 20px auto; /* 居中显示 */
    padding: 20px; /* 内边距 */
    background-color: #fff; /* 背景颜色 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    border-radius: 8px; /* 边框圆角 */
}

/* 用户信息项样式 */
.user-info-item {
    margin-bottom: 10px; /* 项之间的间距 */
    padding: 10px 0; /* 内边距 */
    border-bottom: 1px solid #eaeaea; /* 底部边框 */
}

/* 用户信息标题样式 */
.user-info-title {
    font-weight: bold; /* 字体加粗 */
    margin-bottom: 5px; /* 标题与内容之间的间距 */
    color: #555; /* 标题颜色 */
}

/* 用户信息内容样式 */
.user-info-content {
    font-size: 16px; /* 字体大小 */
    color: #333; /* 文本颜色 */
}

/* 修改按钮样式 */
.update-button {
    display: inline-block; /* 行内块级元素 */
    padding: 8px 15px; /* 内边距 */
    margin-top: 10px; /* 与内容的间距 */
    background-color: #007bff; /* 背景颜色 */
    color: #fff; /* 文本颜色 */
    text-decoration: none; /* 去除下划线 */
    border-radius: 5px; /* 边框圆角 */
    transition: background-color 0.3s; /* 过渡效果 */
    border: none;
}

/* 修改按钮悬停效果 */
.update-button:hover {
    background-color: #0056b3; /* 悬停时的背景颜色 */
}
.user-info-item a:hover{
    color: #ffffff;
}
/* 最后一个用户信息项的清除边框 */
.user-info-item:last-child {
    border-bottom: none; /* 去除最后一个项的底部边框 */
}


.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}
.modal-content {
    background-color: white;
    margin: 15% auto;
    padding: 20px;
    width: 80%;
    max-width: 500px;
    border-radius: 5px;
}
.close {
    float: right;
    cursor: pointer;
    font-size: 24px;
}
.pay-button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 15px;
}
.locked-chapter {
    cursor: pointer;
}
